<template>
  <div>
    <div class="total-part card">
      <p class="card-title">数据总览</p>
      <div class="part-main flex">
        <template v-for="(item, index) in dataOverview">
          <div v-if="item.types.some(typeItem => typeItem == type)" :key="index" class="item">
            <img :src="item.icon">
            <p class="item-name font-14">{{ item.name }}</p>
            <p class="item-num font-20-B">{{ numConvert(item.count, 2) }}</p>
          </div>
        </template>
      </div>
    </div>

    <div class="blogger-part card">
      <p class="card-title">推广红人列表</p>
      <div class="part-main">
        <div class="screen flex flex-wrap">
          <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
            @show="selectShowChange('areasShow', true)" @hide="selectShowChange('areasShow', false)">
            <template #reference>
              <div class="select-btn flex-between flex-align-items-center pointer"
                :class="{ selected: bloggerPartForm.areas.length > 0, active: selectShow.areasShow }">
                <span class="font-14">国家{{ bloggerPartForm.areas.length > 0 ? `(${bloggerPartForm.areas.length})` : ''
                }}</span>
                <i class="iconfont icon-xiajiantou"></i>
              </div>
            </template>
            <checkbox-popup :list="countryList" :checked="bloggerPartForm.areas"
              @change="e => selectChange(e, 'areas')"></checkbox-popup>
          </el-popover>
          <el-popover placement="bottom-start" :width="220" trigger="click" :show-arrow="false"
            @show="selectShowChange('cates', true)" @hide="selectShowChange('cates', false)">
            <template #reference>
              <div class="select-btn flex-between flex-align-items-center pointer"
                :class="{ selected: bloggerPartForm.cates.length > 0, active: selectShow.catesShow }">
                <span class="font-14">标签筛选{{ bloggerPartForm.cates.length > 0 ? `(${bloggerPartForm.cates.length})` : ''
                }}</span>
                <i class="iconfont icon-xiajiantou"></i>
              </div>
            </template>
            <checkbox-popup1 :list="cateList" :checked="bloggerPartForm.cates"
              @change="e => selectChange(e, 'cates')"></checkbox-popup1>
          </el-popover>
          <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
            @show="selectShowChange('fansShow', true)" @hide="selectShowChange('fansShow', false)">
            <template #reference>
              <div class="select-btn flex-between flex-align-items-center pointer"
                :class="{ selected: bloggerPartForm.fans !== -1, active: bloggerPartForm.fansShow }">
                <span class="font-14">{{ bloggerPartForm.fans === -1 ? '粉丝量' :
                  bloggerPartForm.fans.toString().split('-').length > 1
                    ?
                    bloggerPartForm.fans : `${bloggerPartForm.fans}以上` }}</span>
                <i class="iconfont icon-xiajiantou"></i>
              </div>
            </template>
            <radio-range-popup :list="data.fansList" :checked="bloggerPartForm.fans" minPlaceholder="最小值"
              maxPlaceholder="最大值" @change="e => selectChange(e, 'fans')"></radio-range-popup>
          </el-popover>
          <el-popover v-if="type != 3" placement="bottom" :width="194" trigger="click" :show-arrow="false"
            @show="selectShowChange('averageViewsShow', true)" @hide="selectShowChange('averageViewsShow', false)">
            <template #reference>
              <div class="select-btn flex-between flex-align-items-center pointer"
                :class="{ selected: bloggerPartForm.averageViews !== -1, active: selectShow.averageViewsShow }">
                <span class="font-14">{{ bloggerPartForm.averageViews === -1 ? '平均观看量' :
                  bloggerPartForm.averageViews.toString().split('-').length > 1 ?
                    bloggerPartForm.averageViews : `${bloggerPartForm.averageViews}以上` }}</span>
                <i class="iconfont icon-xiajiantou"></i>
              </div>
            </template>
            <radio-range-popup :list="data.averageViews" :checked="bloggerPartForm.averageViews" minPlaceholder="最小值"
              maxPlaceholder="最大值" @change="e => selectChange(e, 'averageViews')"></radio-range-popup>
          </el-popover>
          <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
            @show="selectShowChange('averageInteractionRateShow', true)"
            @hide="selectShowChange('averageInteractionRateShow', false)">
            <template #reference>
              <div class="select-btn flex-between flex-align-items-center pointer"
                :class="{ selected: bloggerPartForm.averageInteractionRate !== -1, active: selectShow.averageInteractionRateShow }">
                <span class="font-14">{{ bloggerPartForm.averageInteractionRate === -1 ? '平均互动率' :
                  bloggerPartForm.averageInteractionRate.toString().split('-').length > 1 ?
                    `${bloggerPartForm.averageInteractionRate.toString().split('-')[0]}%-${bloggerPartForm.averageInteractionRate.toString().split('-')[1]}%`
                    : `${bloggerPartForm.averageInteractionRate}%以上` }}</span>
                <i class="iconfont icon-xiajiantou"></i>
              </div>
            </template>
            <radio-range-popup :list="data.averageInteractionRate" :checked="bloggerPartForm.averageInteractionRate"
              minPlaceholder="最小值 %" maxPlaceholder="最大值 %"
              @change="e => selectChange(e, 'averageInteractionRate')"></radio-range-popup>
          </el-popover>
          <el-popover placement="bottom-start" :width="190" trigger="click" :show-arrow="false"
            @show="selectShowChange('promotionTime', true)" @hide="selectShowChange('promotionTime', false)">
            <template #reference>
              <div class="select-btn flex-between flex-align-items-center pointer"
                :class="{ selected: bloggerPartForm.promotionTime > 0, active: selectShow.promotionTimeShow }">
                <span class="font-14">{{ bloggerPartForm.promotionTime > 0 ? data.promotionTimeList.find(item =>
                  item.value ===
                  bloggerPartForm.promotionTime).name
                  : '推广时间' }}</span>
                <i class="iconfont icon-xiajiantou"></i>
              </div>
            </template>
            <radio-popup :list="data.promotionTimeList" :checked="bloggerPartForm.promotionTime"
              @change="e => selectChange(e, 'promotionTime')"></radio-popup>
          </el-popover>
          <div class="screen-btns flex">
            <p class="font-14 pointer" @click="clearScreen">清除</p>
            <p class="font-14 pointer">确定</p>
          </div>
        </div>
        <div class="switch-btns flex">
          <div class="switch-btn flex flex-align-items-center">
            <el-switch size="small" />
            <span class="font-14">本账号未联系</span>
          </div>
          <div class="switch-btn flex flex-align-items-center">
            <el-switch size="small" />
            <span class="font-14">所有账号未联系红人</span>
          </div>
        </div>
        <el-table :data="bloggerPartTableData" height="420" style="width: 100%;" class="table"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" fixed="left" />
          <el-table-column label="全选" width="180" fixed="left">
            <template #default="scope">
              <div class="row-name flex flex-align-items-center">
                <img :src="scope.row.avatar">
                <p class="font-16-B ellipsis-1">{{ scope.row.name }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="推广日期" width="160" />
          <el-table-column prop="location" label="国家" width="160" />
          <el-table-column label="所属平台" width="100">
            <template #default="scope">
              <img :src="platformImg[scope.row.platform]" class="row-img">
            </template>
          </el-table-column>
          <el-table-column label="平台标签" width="180">
            <template #default="scope">
              <div v-if="scope.row.tags" class="row-tags flex">
                <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}
                </p>
                <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                  <template #reference>
                    <div class="row-tag flex-center flex-align-items-center">
                      <i class="iconfont icon-gengduo"></i>
                    </div>
                  </template>
                  <div class="item-all-tags flex flex-wrap">
                    <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag
                    }}
                    </p>
                  </div>
                </el-popover>
              </div>
              <p v-else>-</p>
            </template>
          </el-table-column>
          <el-table-column prop="averageInteractionRate" label="凡兔评分" width="100" />
          <el-table-column label="粉丝量" width="100">
            <template #default="scope">
              <p class="font-14">{{ numConvert(scope.row.fans, 2) }}</p>
            </template>
          </el-table-column>
          <el-table-column v-if="type == 3" label="平均点赞量" width="140">
            <template #default="scope">
              <p class="font-14">{{ numConvert(scope.row.averageViews, 2) }}</p>
            </template>
          </el-table-column>
          <el-table-column v-else label="平均观看量" width="140">
            <template #default="scope">
              <p class="font-14">{{ numConvert(scope.row.averageViews, 2) }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="averageInteractionRate" label="平均互动率" width="140" />
        </el-table>
        <div class="pagination flex flex-align-items-center" style="justify-content: end;height: 64px;">
          <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
            :total="bloggerPartForm.total" />
        </div>
      </div>
    </div>

    <div class="rank-part card">
      <p class="card-title">视频榜单</p>
      <div class="part-main">
        <div class="toggle flex-between flex-align-items-center">
          <div class="tabs flex flex-align-items-center">
            <template v-for="(item, index) in rankPartTabs">
              <p v-if="index > 0 || (index === 0 && type != 3)" class="pointer font-12"
                :class="{ active: item === rankPartForm.tab }" @click="tabChange(item)">{{ item }}</p>
            </template>
          </div>
          <p class="toggle-btn font-14 flex flex-align-items-center pointer" @click="rankAllListShow = true">
            查看更多 <i class="iconfont icon-a-jiantou-you"></i>
          </p>
        </div>
        <rank-list :list="rankPartList" :tab="rankPartForm.tab" :type="type"></rank-list>
      </div>
    </div>

    <div class="analysis-part card">
      <p class="card-title">推广活动趋势</p>
      <div class="view-toggle flex flex-align-items-center">
        <i class="iconfont icon-tubiao pointer" :class="{ active: analysisPartForm.format === 'echart' }"
          @click="analysisPartFormatChange('echart')"></i>
        <span></span>
        <i class="iconfont icon-caidan1 pointer" :class="{ active: analysisPartForm.format === 'table' }"
          @click="analysisPartFormatChange('table')"></i>
      </div>
      <div class="part-main">
        <div v-if="analysisPartForm.format === 'echart'" class="content-trend-list flex-between">
          <div v-for="(item, index) in contentTrendList" :key="index" class="content-trend-item pointer"
            :class="{ active: item.type === analysisPartForm.type }" @click="contentTrendTypeChange(item.type)">
            <p class="content-trend-item-name flex flex-align-items-center">
              <i class="iconfont" :class="item.icon"></i>
              <span class="font-14">{{ item.name }}</span>
            </p>
            <p class="content-trend-item-num font-20-B">{{ item.value }}</p>
          </div>
        </div>
        <div v-if="analysisPartForm.format === 'echart'" class="card-tips font-14">*点击柱状图，可在下方查看当月视频发布数</div>
        <div v-if="analysisPartForm.format === 'table'" class="card-tips font-14">*点击表格行，可在下方查看当月视频发布数</div>
        <div v-show="analysisPartForm.format === 'echart'" id="content-trend-echart-bar"></div>
        <template v-if="analysisPartForm.format === 'table'">
          <el-table :data="analysisPartTableData" height="420" class="table">
            <el-table-column prop="time" label="日期" />
            <el-table-column label="推广红人">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
              </template>
            </el-table-column>
            <el-table-column v-if="type == 3" label="推广帖子">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
              </template>
            </el-table-column>
            <el-table-column v-if="type == 3" label="点赞量">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
              </template>
            </el-table-column>
            <el-table-column v-if="type != 3" label="推广视频">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
              </template>
            </el-table-column>
            <el-table-column v-if="type != 3" label="曝光量">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div id="scatter-chart"></div>
      </div>
      <p class="card-desc">将品牌在该平台下每日发布的视频数量汇总成表，全览品牌整体营销节奏</p>
    </div>

    <div class="flex">
      <div class="kind-part card">
        <p class="card-title">推广红人类型分布</p>
        <div class="part-main">
          <div id="sensation-type-echart"></div>
        </div>
        <p class="card-desc">针对品牌推广红人进行标签化筛查，综合生成该平台下品牌推广红人类型分布占比</p>
      </div>
      <div class="channel-part card">
        <p class="card-title">推广红人频道规模分布</p>
        <div class="part-main flex flex-align-items-center">
          <div class="split flex">
            <div class="left flex-between flex-column flex-align-items-center">
              <div class="left-item font-12">100w 粉丝量</div>
              <div class="left-item font-12">50w 粉丝量</div>
              <div class="left-item font-12">5w 粉丝量</div>
              <div class="left-item font-12">1w 粉丝量</div>
            </div>
            <img src="@/assets/line.png">
            <div class="right flex-between flex-column flex-align-items-center">
              <div v-for="(item, index) in channelPartList" :key="index" class="right-item font-14-B">{{ item.name }}
              </div>
            </div>
          </div>
          <div class="rank flex flex-column">
            <div v-for="(item, index) in channelPartList" :key="index" class="rank-item">
              <div class="item-top flex-between">
                <div class="label font-16-B">{{ item.rate }}%</div>
                <div class="value font-16-B">{{ item.count }}</div>
              </div>
              <div class="item-bottom">
                <el-progress :percentage="item.rate" :stroke-width="10" :color="colors[index]" :show-text="false" />
              </div>
            </div>
          </div>
        </div>
        <p class="card-desc">针对该平台下所有推广红人进行频道属性分析，按照不同层级的红人粉丝量来统计品牌推广红人频道规模占比</p>
      </div>
    </div>

    <div class="country-part card">
      <p class="card-title">推广红人地区分布</p>
      <div class="part-main flex flex-align-items-center">
        <div class="left">
          <div class="area-proportion-list">
            <div v-for="(item, index) in countryPartList.slice(0, 8)" :key="index" class="area-proportion-item flex">
              <p class="area-proportion-item-index font-20-B">0{{ index + 1 }}</p>
              <div class="area-proportion-item-right">
                <div class="area-proportion-item-bar">
                  <p :style="{ width: item.value + '%', background: areaProportionColorList[index] }"></p>
                </div>
                <p class="area-proportion-item-value font-14">{{ item.name }} {{ item.value }}%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div id="map-echart"></div>
          <div class="chart-tips flex">
            <div class="chart-tips_bar flex-center">
              <span></span><span></span><span></span><span></span>
            </div>
          </div>
        </div>
      </div>
      <p class="card-desc">智能抓取该平台下品牌推广红人，通过大数据挖掘红人所在地获取品牌目标市场分布占比</p>
    </div>

    <div class="flex">
      <div class="word-part card">
        <p class="card-title">热点词云</p>
        <div class="part-main"></div>
        <p class="card-desc">通过解析品牌在该平台下推广内容并抓取内嵌标签进行归类和权重计算，进而生成品牌专属的热点词云</p>
      </div>
      <div class="tag-part card">
        <p class="card-title">内容标签榜</p>
        <div class="part-main">
          <div v-for="(item, index) in tagPartList" :key="index" class="tag-item flex-between flex-align-items-center">
            <div class="flex">
              <p class="item-index font-14-B">0{{ index + 1 }}</p>
              <p class="item-name font-14-B">#{{ item.name }}</p>
            </div>
            <p class="item-value font-14-B">{{ item.value }}</p>
          </div>
        </div>
        <p class="card-desc">通过解析品牌在该平台下推广内容并抓取内嵌标签进行归类和权重计算，进而生成品牌专属的内容标签榜</p>
      </div>
    </div>
  </div>

  <rank-all-list v-if="rankAllListShow" :type="type" @close="rankAllListShow = false"></rank-all-list>
</template>

<script setup>
import CheckboxPopup from '@/views/home/components/checkboxPopup.vue';
import RadioRangePopup from '@/views/home/components/radioRangePopup.vue';
import RadioPopup from '../../../components/radioPopup.vue';
import CheckboxPopup1 from '../../../components/checkboxPopup.vue';
import RankList from './rankList.vue';
import RankAllList from './rankAllList.vue';
import { ref, defineProps, onMounted } from 'vue';
import api from '@/api/index.js';
import numConvert from '@/js/numConvert.js';
import data from '@/js/data.js';
import * as echarts from "echarts";
import '@/js/world.js';
import nameMap from '@/js/nameMap.js';

const props = defineProps(['type']);

const rankPartTabs = ['曝光量排行', '点赞量排行', '评论量排行', '互动率排行'];
const colors = ['#73deb3', '#555cfd', '#fdbd36', '#ff5277', '#b475ff'];
const areaProportionColorList = ['#ff5277', '#555cfd', '#73deb3', '#fdbd36', '#f47827', '#b475ff', '#f4d527', '#86e671'];

const dataOverview = ref([
  {
    name: '推广红人数',
    count: 1156465,
    icon: require('../../../../../assets/icon-14.png'),
    types: [1, 2, 3]
  },
  {
    name: '推广视频数',
    count: 1156465,
    icon: require('../../../../../assets/icon-16.png'),
    types: [1, 2]
  },
  {
    name: '推广帖子数',
    count: 1156465,
    icon: require('../../../../../assets/icon-25.png'),
    types: [3]
  },
  {
    name: '曝光量',
    count: 1156465,
    icon: require('../../../../../assets/icon-24.png'),
    types: [1, 2, 3]
  },
  {
    name: '品牌互动率（平均）',
    count: 1156465,
    icon: require('../../../../../assets/icon-23.png'),
    types: [1, 2, 3]
  }
]);
const bloggerPartForm = ref({
  cates: [],
  areas: [],
  fans: -1,
  averageViews: -1,
  averageInteractionRate: -1,
  promotionTime: null,
  total: 100
});
const selectShow = ref({});
const cateList = ref([
  {
    name: '美容',
    value: 1
  },
  {
    name: '美妆护肤',
    value: 7
  },
  {
    name: '健康保健',
    value: 8
  }
]);
const bloggerPartTableData = ref([]);
const rankPartForm = ref({
  tab: props.type != 3 ? '曝光量排行' : '点赞量排行',
  total: 100
});
const rankPartList = ref([
  {
    id: 1,
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    name: 'xxxxx',
    time: '2023-12-16',
    count: 1165465,
    rate: '55%'
  }
]);
const rankAllListShow = ref(false);
const contentTrendList = ref([
  {
    name: '推广红人',
    type: 1,
    icon: 'icon-fensix',
    value: 132456
  },
  {
    name: props.type == 3 ? '推广帖子' : '推广视频',
    type: 2,
    icon: 'icon-shipinshuliang',
    value: 132456
  },
  {
    name: props.type == 3 ? '点赞量' : '曝光量',
    type: 3,
    icon: 'icon-guankanliang',
    value: 132456
  }
]);
const analysisPartForm = ref({
  format: 'echart',
  type: 1,
  total: 100
});
const analysisPartTableData = ref([
  {
    time: '2023-12-16',
    count: 10
  }
]);
const sensationTypeList = ref([
  {
    name: '科技',
    value: 10
  },
  {
    name: '电影',
    value: 20
  }
]);
const channelPartList = ref([
  {
    name: '头部红人',
    rate: 3.74,
    count: 1972
  },
  {
    name: '肩部红人',
    rate: 3.74,
    count: 1972
  },
  {
    name: '腰部红人',
    rate: 3.74,
    count: 1972
  },
  {
    name: '尾部红人',
    rate: 3.74,
    count: 1972
  },
  {
    name: '长尾红人',
    rate: 3.74,
    count: 1972
  }
]);
const countryPartList = ref([
  {
    name: '西班牙',
    value: 18.38
  },
  {
    name: '墨西哥',
    value: 18.38
  },
  {
    name: '印度',
    value: 18.38
  },
  {
    name: '美国',
    value: 18.38
  },
  {
    name: '意大利',
    value: 18.38
  },
  {
    name: '阿根廷',
    value: 18.38
  },
  {
    name: '哥伦比亚',
    value: 18.38
  },
  {
    name: '秘鲁',
    value: 18.38
  }
]);
const tagPartList = ref([
  {
    name: 'free fire',
    value: 13212
  },
  {
    name: 'shorts',
    value: 13212
  },
  {
    name: 'tutorial',
    value: 13212
  },
  {
    name: 'vlog',
    value: 13212
  },
  {
    name: 'garena free fire',
    value: 13212
  },
  {
    name: 'poco',
    value: 13212
  },
  {
    name: 'recetas',
    value: 13212
  },
  {
    name: 'free fire new event',
    value: 13212
  },
  {
    name: 'gameplay',
    value: 13212
  },
  {
    name: 'musica',
    value: 13212
  }
]);
const countryList = ref([]);

const selectChange = (e, field) => {
  bloggerPartForm.value[field] = e;
}
const selectShowChange = (field, value) => {
  selectShow.value[field] = value;
}
// 清除筛选条件
const clearScreen = () => {
  const newValue = {
    cates: [],
    areas: [],
    fans: -1,
    averageViews: -1,
    averageInteractionRate: -1,
    promotionTime: null
  };
  bloggerPartForm.value = {
    ...bloggerPartForm.value,
    ...newValue
  }
}
const handleSelectionChange = e => {
  console.log(e);
}
const tabChange = e => {
  if (rankPartForm.value.tab !== e) {
    rankPartForm.value.tab = e;
  }
}
// 切换echart或table
const analysisPartFormatChange = e => {
  if (analysisPartForm.value.format !== e) {
    analysisPartForm.value.format = e;
    analysisEchart();
    scatterEchart();
  }
}
const contentTrendTypeChange = e => {
  if (analysisPartForm.value.type !== e) {
    analysisPartForm.value.type = e;
    analysisEchart();
    scatterEchart();
  }
}
const analysisEchart = () => {
  const myEChart = echarts.init(document.getElementById("content-trend-echart-bar"));
  let xAxisData = [], seriesData = [];
  analysisPartTableData.value.forEach(item => {
    xAxisData.push(item.time);
    seriesData.push(item.count);
  });
  const tooltip = {
    trigger: 'item',
    formatter: ''
  };
  if (analysisPartForm.value.type === 1) {
    tooltip.formatter = '{b}<br/>推广红人 {c}';
  } else if (analysisPartForm.value.type === 2 && props.type == 3) {
    tooltip.formatter = '{b}<br/>推广帖子 {c}';
  } else if (analysisPartForm.value.type === 2) {
    tooltip.formatter = '{b}<br/>推广视频 {c}';
  } else if (analysisPartForm.value.type === 3 && props.type == 3) {
    tooltip.formatter = '{b}<br/>点赞量 {c}';
  } else if (analysisPartForm.value.type === 3) {
    tooltip.formatter = '{b}<br/>曝光量 {c}';
  }
  const option = {
    tooltip: tooltip,
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: seriesData,
        type: 'bar',
        barWidth: 20,
        itemStyle: {
          color: analysisPartForm.value.type === 1 ? '#555cfd' : analysisPartForm.value.type === 2 ? '#ff5277' : '#fdbd36',
          borderRadius: [10, 10, 0, 0]
        }
      }
    ]
  };
  myEChart.setOption(option);
}

const scatterEchart = () => {
  const myEChart = echarts.init(document.getElementById("scatter-chart"));
  let xAxisData = [], seriesData = [];
  analysisPartTableData.value.forEach(item => {
    xAxisData.push(item.time);
    seriesData.push(item.count);
  });
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>发布视频数 {c}'
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    yAxis: {},
    series: [
      {
        data: seriesData,
        type: 'scatter',
        symbolSize: function (e) {
          return e * 4;
        },
        itemStyle: {
          color: function (e) {
            return `rgba(255, 82, 119, ${e.data / 20})`;
          }
        }
      }
    ]
  };
  myEChart.setOption(option);
}

const sensationTypeEchart = () => {
  const myEChart = echarts.init(document.getElementById("sensation-type-echart"));
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}占比 {d}%'
    },
    legend: {
      bottom: '5%',
      left: 'center',
      // doesn't perfectly work with our tricks, disable it
      selectedMode: false
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '60%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 24,
            fontWeight: 'bold'
          }
        },
        label: {
          show: true,
          formatter(param) {
            // correct the percentage
            return param.percent + '%';
          }
        },
        data: sensationTypeList.value
      }
    ]
  };
  myEChart.setOption(option);
}
const mapEchart = () => {
  const myEChart = echarts.init(document.getElementById("map-echart"));
  const option = {
    visualMap: {
      //图列显示柱
      type: 'continuous',
      min: 0,
      max: 15,
      itemHeight: 0,
      realtime: false,
      color: ['#ff5277', '#ff5277cc', '#ff527799', '#ff527766']
    },
    tooltip: {
      //提示框组件
      trigger: 'item',
      formatter: function (e) {
        if (e.data) {
          return `${e.data.name}<br/>粉丝量：${e.data.value}%`;
        } else {
          return '';
        }
      }
    },
    series: [{
      type: 'map',
      mapType: 'world',
      data: countryPartList.value,
      //绑定数据
      nameMap,
      label: {
        normal: { show: false },
        emphasis: { show: false }
      }
    }]
  };
  myEChart.setOption(option);
}
// 获取国家列表
const queryCountryList = () => {
  api.sensation.queryCountryList().then(res => {
    countryList.value = res.filter(item => item.countries.length).map(item => {
      item.children = item.countries;
      return item;
    });
  });
}

onMounted(() => {
  analysisEchart();
  scatterEchart();
  sensationTypeEchart();
  mapEchart();
  queryCountryList();
});
</script>

<style lang="less" scoped>
.card {
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  margin-bottom: 24px;

  .card-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    line-height: 22px;

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      background: @main-color;
      border-radius: 50%;
      margin-right: 8px;
    }
  }

  .card-desc {
    border-top: 2px solid #ededed;
    padding-top: 14px;
    font-size: 14px;
    color: #999;
    line-height: 20px;
  }
}

.total-part {
  .part-main {
    margin-top: 32px;

    .item {
      padding: 8px;
      flex: 1;
      height: 100px;
      border-radius: 20px;
      margin-right: 16px;
      position: relative;
      overflow: hidden;

      &:nth-child(1) {
        background: linear-gradient(135deg, rgba(252, 161, 113, 0.1) 0%, rgba(246, 98, 144, 0.1) 100%);

        .item-num {
          color: @main-color;
        }
      }

      &:nth-child(2) {
        background: linear-gradient(135deg, rgba(81, 170, 254, 0.1) 0%, rgba(119, 78, 240, 0.1) 100%);

        .item-num {
          color: #4c64ff;
        }
      }

      &:nth-child(3) {
        background: linear-gradient(135deg, rgba(250, 217, 97, 0.1) 0%, rgba(255, 155, 4, 0.1) 100%);

        .item-num {
          color: #ffac04;
        }
      }

      &:nth-child(4) {
        background: linear-gradient(315deg, rgba(95, 215, 203, 0.1) 0%, rgba(136, 240, 182, 0.1) 100%);
        margin-right: 0;

        .item-num {
          color: #6cdbc9;
        }
      }

      img {
        position: absolute;
        width: 100px;
        height: 100px;
        right: 20px;
        top: 20px;
        z-index: 1;
      }

      .item-name {
        padding: 8px 0 0 16px;
        color: #666;
        line-height: 18px;
      }

      .item-num {
        font-size: 20px;
        line-height: 27px;
        margin-top: 12px;
        padding-left: 16px;
      }
    }
  }
}

.blogger-part {
  .part-main {
    margin-top: 32px;

    .screen {
      margin-bottom: 20px;

      .select-btn {
        min-width: 118px;
        height: 32px;
        border-radius: 6px;
        background: #fff;
        padding-left: 12px;
        padding-right: 8px;
        margin-right: 8px;
        border: 1px solid #f2f2f2;

        &.selected {
          background: #ffedf1;

          span,
          i {
            color: @main-color;
          }
        }

        &.active {
          background: #ffedf1;
          border: 1px solid @main-color;

          span,
          i {
            color: @main-color;
          }
        }

        span {
          color: #333;
        }

        i {
          color: #999;
          font-size: 12px;
        }
      }

      .screen-btns {
        margin-bottom: 16px;

        p {
          width: 64px;
          height: 32px;
          border-radius: 6px;
          text-align: center;
          line-height: 32px;

          &:first-child {
            color: #666;
            background: #f8f8f8;
          }

          &:last-child {
            margin-left: 8px;
            color: #fff;
            background: @main-color;
          }
        }
      }
    }

    .switch-btns {
      margin-bottom: 20px;

      .switch-btn {
        margin-right: 24px;

        &:last-child {
          margin-right: 0;
        }

        span {
          padding-left: 8px;
        }
      }
    }

    .table {
      .row-name {
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 16px;
        }
      }

      .row-img {
        width: 20px;
        height: 20px;
      }

      .row-tags {
        .row-tag {
          height: 24px;
          padding: 0 8px;
          background: hsla(0, 0%, 93%, .4);
          border-radius: 12px;
          border: 1px solid #dcdee0;
          color: #666;
          line-height: 24px;
          margin-right: 8px;
        }
      }
    }
  }
}

.rank-part {
  .part-main {
    margin-top: 24px;

    .toggle {
      .tabs {
        height: 44px;
        border-radius: 10px;
        border: 1px solid #f2f2f2;
        padding: 6px;

        p {
          width: 82px;
          height: 30px;
          color: #666;
          border-radius: 8px;
          border: 1px solid transparent;
          line-height: 28px;
          text-align: center;

          &.active {
            color: @main-color;
            border-color: @main-color;
            font-weight: bold;
          }
        }
      }

      .toggle-btn {
        color: @main-color;

        i {
          font-size: 14px;
          color: @main-color;
          margin-left: 4px;
        }
      }
    }
  }
}

.analysis-part {
  position: relative;

  .view-toggle {
    position: absolute;
    top: 24px;
    right: 40px;
    width: 100px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;

    i {
      flex: 1;
      font-size: 20px;
      color: #999;
      height: 44px;
      line-height: 44px;
      text-align: center;

      &.active {
        color: @main-color;
      }
    }

    span {
      width: 1px;
      height: 24px;
      background: #ededed;
      border-radius: 1px;
    }
  }

  .part-main {
    margin-top: 40px;

    .content-trend-list {
      margin-bottom: 40px;

      .content-trend-item {
        flex: 1;
        margin-right: 16px;
        height: 90px;
        border-radius: 14px;
        margin-right: 16px;
        padding: 16px 24px;
        border: 1px solid #f2f2f2;

        &.active {
          &:nth-child(1) {
            background: rgba(85, 92, 253, .06);
            border-color: #555cfd;
          }

          &:nth-child(2) {
            background: rgba(255, 82, 119, .06);
            border-color: @main-color;
          }

          &:nth-child(3) {
            background: rgba(253, 189, 54, .1);
            border-color: #fdbd36;
          }
        }

        &:hover {
          &:nth-child(1) {
            background: rgba(85, 92, 253, .06);
          }

          &:nth-child(2) {
            background: rgba(255, 82, 119, .06);
          }

          &:nth-child(3) {
            background: rgba(253, 189, 54, .1);
          }
        }

        &:nth-child(1) {
          i {
            color: #555cfd;
          }
        }

        &:nth-child(2) {
          i {
            color: @main-color;
          }
        }

        &:nth-child(3) {
          margin-right: 0;

          i {
            color: #fdbd36;
          }
        }

        .content-trend-item-name {
          margin-bottom: 6px;

          i {
            font-size: 20px;
            margin-right: 8px;
          }

          span {
            color: #666;
          }
        }

        .content-trend-item-num {
          color: #333;
          padding-left: 32px;
        }
      }
    }

    .card-tips {
      margin-bottom: 40px;
      color: #999;
      text-align: center;
    }

    #content-trend-echart-bar {
      width: 100%;
      height: 300px;
    }

    #scatter-chart {
      width: 100%;
      height: 220px;
    }
  }
}

.kind-part {
  flex: 3;
  height: 566px;
  margin-right: 16px;

  #sensation-type-echart {
    width: 100%;
    height: 435px;
  }
}

.channel-part {
  flex: 4;
  height: 566px;

  .part-main {
    padding: 62px 77px 33px 77px;

    .split {
      .left {
        padding: 62px 0;

        .left-item {
          color: #999;
          line-height: 16px;

          &:first-child {
            margin-top: -6px;
          }
        }
      }

      img {
        margin-left: 8px;
        margin-right: 16px;
        width: 18px;
        height: 340px;
      }

      .right {
        margin-top: -4px;
        padding: 32px 0;

        .right-item {
          color: #1d2129;
          line-height: 20px;
        }
      }
    }

    .rank {
      flex: 1;
      margin-left: 48px;
      height: 344px;
      padding: 15px 0;

      .rank-item {
        margin-bottom: 30px;

        &:last-child {
          margin-bottom: 0;
        }

        .item-top {
          margin-bottom: 4px;

          .label {
            color: #1d2129;
            line-height: 22px;
          }

          .value {
            color: #999;
            line-height: 22px;
          }
        }
      }
    }
  }
}

.country-part {
  .part-main {
    margin: 60px 0 40px;

    .area-proportion-list {
      .area-proportion-item {
        margin-bottom: 23px;

        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          .area-proportion-item-index {
            color: #333;
          }
        }

        .area-proportion-item-index {
          color: #d8d8d8;
          margin-right: 20px;
        }

        .area-proportion-item-right {
          .area-proportion-item-bar {
            width: 320px;
            height: 10px;
            background: #ebeef5;
            border-radius: 0 15px 15px 0;
            margin-bottom: 6px;

            p {
              border-radius: 0 15px 15px 0;
              height: 10px;
            }
          }

          .area-proportion-item-value {
            color: #1d2129;
          }
        }
      }
    }

    .right {
      flex: 1;

      #map-echart {
        height: 380px;
      }

      .chart-tips {
        height: 74px;
        justify-content: flex-end;

        .chart-tips_bar {
          span {
            width: 80px;
            height: 10px;
            position: relative;

            &::before {
              position: absolute;
              font-size: 12px;
              color: #999;
              line-height: 17px;
              top: 12px;
            }

            &:nth-child(1) {
              background: rgb(255, 82, 119);

              &::before {
                content: "";
                left: 0;
              }
            }

            &:nth-child(2) {
              background: rgba(255, 82, 119, 0.8);

              &::before {
                content: "15%";
                left: -4px;
              }
            }

            &:nth-child(3) {
              background: rgba(255, 82, 119, 0.6);

              &::before {
                content: "10%";
                left: -4px;
              }
            }

            &:nth-child(4) {
              background: rgba(255, 82, 119, 0.4);

              &::before {
                content: "5%";
                left: -4px;
              }

              &::after {
                content: "0";
                position: absolute;
                font-size: 12px;
                color: #999;
                line-height: 17px;
                top: 12px;
                right: 0;
              }
            }
          }
        }
      }
    }
  }
}

.word-part {
  flex: 1;
  margin-right: 16px;

  .part-main {
    height: 500px;
    margin-bottom: 24px;
  }
}

.tag-part {
  flex: 1;

  .part-main {
    padding-top: 32px;
    height: 524px;

    .tag-item {
      height: 46px;
      padding: 0 24px;
      box-shadow: inset 0 -1px 0 0 #f2f3f5;

      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        .item-index {
          color: @main-color;
        }
      }

      .item-index {
        color: #bbb;
        margin-right: 14px;
      }

      .item-name {
        color: #333;
      }

      .item-value {
        color: #333;
      }
    }
  }
}
</style>